<template>
	<view class="xbd-project-card">
		<view class="left">
			<view style="white-space: pre-line !important;word-break: break-all !important;word-wrap: break-word ;">{{myinfo.name}}</view>
			<view style=" margin-top: 20rpx; font-size: 26rpx; color:#A0A7B8;white-space: pre-line !important;word-break: break-all !important;word-wrap: break-word ;">{{myinfo.desc}}</view>
		</view>
		<view class="middle">
			<view class="">
				<image v-if="myinfo.flow[myinfo.flow.length-1].state=='successed'" class="garden"
					src="@/static/image/garden3.png"></image>
				<image v-else-if="myinfo.flow[myinfo.flow.length-1].state=='wait'" class="garden"
					src="@/static/image/garden2.png"></image>
				<image
					v-else-if="myinfo.flow[myinfo.flow.length-1].state=='refused' || myinfo.flow[myinfo.flow.length-1].state==''"
					class="garden" src="@/static/image/garden4.png"></image>
			</view>
			<view v-if="length !== (inx+1)" class="line"></view>
		</view>
		<view class="right">
			<view v-for="(item,index) in myinfo.flow" :key="index">
				<view class="name">
					{{names}}
					<view class="state" v-if="item.state==='successed'">
						合格
					</view>
					<view class="state color" v-if="item.state==='refused'">
						不合格
					</view>
				</view>
				<view v-if="item.state!==''">
					<view class="time">
						{{item.report_time | timeFormat('YYYY-MM-DD HH:mm')}}
					</view>
					<!-- 招投标 -->

					<view v-if="type==='bid' && inx == 0 ">
						<view class="tag">
							项目数据填报
						</view>
						<view class="text">
							预估金额（元）：
							<view >
								<text>{{item.cost | priceFormat(0,'',true)}}</text>
							</view>
							
						</view>
					</view>

					<!-- 物资采购 -->
					<view v-if="type==='goods' && inx == 0 ">
						<view class="tag">
							月度物资需求计划
						</view>
						<view class="text">
							物资名称：
							<view style="margin-bottom: 20rpx;">
								{{item.month.name}}
							</view>
						</view>
						<view class="text">
							需求数量(件)：
						<view  style="margin-bottom: 20rpx;">
							{{item.month.count | priceFormat(0,'',true)}}
						</view>	
						</view>
						<view class="text">
							预估金额(元)：
							<view style="margin-bottom: 20rpx;">
								{{item.month.money | priceFormat(0,'',true)}}
							</view>
						</view>
						<view class="tag">
							紧急物资需求计划
						</view>
						<view class="text">
							物资名称：
							<view style="margin-bottom: 20rpx;">
								{{item.urgent.name}}
							</view>
						</view>
						<view class="text">
							需求数量(件)：
							<view style="margin-bottom: 20rpx;">
								{{item.urgent.count | priceFormat(0,'',true)}}
							</view>
						</view>
						<view class="text">
							预估金额(元)：
							<view style="margin-bottom: 20rpx;">
								{{item.urgent.money | priceFormat(0,'',true)}}
							</view>
						</view>
					</view>

					<!-- 三重一大 -->
					<view v-if="!(type==='bid' && inx == 0) && !(type==='goods' && inx == 0)">
						<view>
							<view class="tag">
								相关资料
							</view>
							<view class='attachment' v-if="showImg(item.data.data_url).length !== 0">
								<image v-for="(items,index) in showImg(item.data.data_url)" :key='index' class="image"
									:src="showImg(item.data.data_url)[index]" @click="image_click(items)"></image>
							</view>
							<view v-else class='text'>
								文件请在PC端查看
							</view>
							<view class="tag">
								进度说明
							</view>
							<view class='text'>
								{{item.process || '-'}}
							</view>

							

						</view>
					</view>
					<view v-if="item.state !== 'wait'">
						<view class="tag">
							审查人
						</view>
						<view class='text'>
							{{item.audit_name}} <text
								style="margin-left: 20rpx; font-size: 26rpx;color: #8890A5;">{{item.audit_time | timeFormat('YYYY-MM-DD HH:mm')}}</text>
						</view>
						<view class="tag">
							审查意见
						</view>
						<view class='text'>
							{{item.view||'-'}}
						</view>
					</view>
				</view>
				<!-- 招投标填报 -->
				<view v-if="type==='bid' && inx == 0 && item.state == ''">
					<view class="tag">
						项目数据填报
					</view>
					<view class='text'>
						<text style="color:#FC4F4F">*</text>预估金额（元）：<uni-easyinput v-model="money"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="12" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="floot">
						<view class="btn pass" @click="passMoney(index)">
							确定
						</view>
					</view>
				</view>

				<view v-if="type==='goods' && inx == 0 && item.state == '' ">
					<view class="tag">
						月度物资需求计划
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>物资名称：<uni-easyinput v-model="monthGoods.val1"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;"  :maxlength="20" placeholder="请输入"></uni-easyinput>
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>需求数量(件)：<uni-easyinput v-model="monthGoods.val2"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="12" placeholder="请输入"></uni-easyinput>
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>预估金额(元)：<uni-easyinput v-model="monthGoods.val3"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="12" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="tag">
						紧急物资名称
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>物资名称：<uni-easyinput v-model="worryGoods.val1"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="20" placeholder="请输入"></uni-easyinput>
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>需求数量(件)：<uni-easyinput v-model="worryGoods.val2"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="12" placeholder="请输入"></uni-easyinput>
					</view>
					<view style="margin-bottom: 20rpx;">
						<text style="color:#FC4F4F">*</text>预估金额(元)：<uni-easyinput v-model="worryGoods.val3"
							placeholderStyle="font-size: 30rpx;color: #a0a7b8;" :maxlength="12" placeholder="请输入"></uni-easyinput>
					</view>
					<view class="floot" v-if="item.state === ''">
						<view class="btn pass" @click="passMonth(index)">
							确定
						</view>
					</view>
				</view>

				<view v-if="item.state === '' && !(type==='bid' && inx == 0) && !(type==='goods' && inx == 0) ">
					<view class="tag">
						<text style="color:#FC4F4F">*</text>相关资料
					</view>
					<!-- 上传图片 -->
					<view class="image">
						<view class="box-image" v-for="(item,index) in upImg" :key="index">
							<image class="del" src="@/static/image/del.png" @click="del(item)"></image>
							<image class="images" :src='upImg[index]' @click="image_click(item)"></image>
						</view>
						<view v-if="upImg.length !== 6" class="upload" @click="choose_image">
							<image src="@/static/image/supervision/upload.png" mode=""></image>
							<view class="">
								上传图片
							</view>
						</view>
					</view>
					<view class="tag">
						进度说明
					</view>
					<textarea class="textarea" placeholder="请输入内容..." v-model="value" maxlength="-1"
						auto-height></textarea>
				</view>
				<view class="floot">
					<view v-if=" item.state === '' && !(type==='bid' && inx == 0) && !(type==='goods' && inx == 0)" class="btn pass" @click="pass(index)">
						确定
					</view>
					<view v-if="item.state==='wait'" class="btn back" @click="cancel(index)">
						撤回
					</view>
					<!-- <view class="btn pass" @click="pass">
							撤回
						</view>
						<view class="btn pass" @click="pass">
							修改
						</view> -->
				</view>
			</view>
			<!-- 未上传  未通过 -->
			<xbd-popup :isShow="showDialog" @dialogConfirm='dialogConfirm' @dialogCancel='dialogCancel'
				content="将撤回所有已上报内容，确定撤回？"></xbd-popup>
		</view>
	</view>
</template>

<script>
	import {
		Prevention
	} from '@/api/index.js';
	export default {
		name: 'XbdProjectCard',
		props: {
			myinfo: '',
			farId: '',
			type: '',
			names:'',
			inx: '',
			length:''
		},
		data() {
			return {
				// 判断是否已读
				titleText: '',
				showDialog: false,
				flag: true,
				value: "",
				money: '',
				upImg: [],
				val:'',
				data_image: [],
				monthGoods: {
					val1: '',
					val2: '',
					val3: ''
				},
				worryGoods: {
					val1: '',
					val2: '',
					val3: ''
				}
			}
		},
		computed: {

		},
		methods: {
			passMoney(val) {

				var reg = /^[0-9]*$/;
				if (this.money === '') {
					return this.$showToast('预估金额：请填写内容');
				} else if (!reg.test(this.money)) {
					return this.$showToast('预估金额：请输入0或正整数');
				}
				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: val,
					type: this.type,
					cost: this.money
				}
				this.flag = false
				this.Report(o)
			},
			passMonth(val) {
				var reg = /^[0-9]*$/;
				if (this.monthGoods.val1 === '') {
					return this.$showToast('物资名称：请填写内容');
				} else if (this.monthGoods.val2 === '') {
					return this.$showToast('需求数量：请填写内容');
				} else if (!reg.test(this.monthGoods.val2)) {
					return this.$showToast('需求数量：请输入0或正整数');
				} else if (this.monthGoods.val3 === '') {
					return this.$showToast('预估金额：请填写内容');
				} else if (!reg.test(this.monthGoods.val3)) {
					return this.$showToast('预估金额：请输入0或正整数');
				} else if (this.worryGoods.val1 === '') {
					return this.$showToast('物资名称：请填写内容');
				} else if (this.worryGoods.val2 === '') {
					return this.$showToast('需求数量：请填写内容');
				} else if (!reg.test(this.worryGoods.val2)) {
					return this.$showToast('需求数量：请输入0或正整数');
				} else if (this.worryGoods.val3 === '') {
					return this.$showToast('预估金额：请填写内容');
				} else if (!reg.test(this.worryGoods.val3)) {
					return this.$showToast('预估金额：请输入0或正整数');
				}

				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: val,
					type: this.type,
					month: {
						name: this.monthGoods.val1,
						count: this.monthGoods.val2,
						money: this.monthGoods.val3,
					},
					urgent: {
						name: this.worryGoods.val1,
						count: this.worryGoods.val2,
						money: this.worryGoods.val3,
					},

				}
				if(this.flag){
					this.flag = false
					this.Report(o)
				}
			},
			// 筛选数组中的图片
			showImg(arr) {
				let a = []
				for (let i = 0; i < arr.length; i++) {
					if (arr[i].indexOf(".png") !== -1 || arr[i].indexOf(".jpg") !== -1 || arr[i].indexOf(".jpeg") !== -1) {
						a.push(arr[i])
					}
				}
				console.log(a, 'a')
				return a
			},
			dialogConfirm() {
				//弹出框确认操作
				if(this.flag){
					this.flag = false
					this.cancell()
				}
				this.showDialog = false;
			},
			dialogCancel() {
				console.log("取消")
				this.showDialog = false;
			},
			image_click(img) {
				// 点击预览图片
				dd.previewImage({
					current: 1,
					urls: [img],
				});
				console.log(img, 'img')
			},
			del(val) {
				console.log(val)
				this.upImg = this.upImg.filter(item => {
					return item !== val
				})
			},
			choose_image() {
				uni.chooseImage({
					count: 6 - this.upImg.length,
					success: (chooseImageRes) => {

						const tempFilePaths = chooseImageRes.tempFilePaths;
						// console.log(chooseImageRes, 'chooseImageRes.tempFilePaths;')
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: 'http://113.135.192.25:18398/api/upload', //仅为示例，非真实的接口地址  后期接口变更需调整
								header: {
									'Content-Type': 'multipart/form-data',
									'Authorization': uni.getStorageSync("token")
								},
								filePath: tempFilePaths[i],
								fileType: 'image',
								name: 'file',
								success: (uploadFileRes) => {
									if( this.upImg.indexOf(JSON.parse(uploadFileRes.data).data.url) == -1 && (JSON.parse(uploadFileRes.data).data.url.indexOf('.jpg') !== -1 || JSON.parse(uploadFileRes.data).data.url.indexOf('.png')!== -1|| JSON.parse(uploadFileRes.data).data.url.indexOf('.jpeg')!== -1)){
										this.upImg.push(JSON.parse(uploadFileRes.data).data.url)
									const a = JSON.parse(uploadFileRes.data).data.url.substring(
										JSON.parse(uploadFileRes.data).data.url.lastIndexOf(
											"upload") + 7, JSON.parse(uploadFileRes.data).data
										.url.length)
									this.data_image.push(a)
									}
								}
							});
						}

					}
				});
				// console.log(this.upImg)
			},


			pass(val) {
				console.log("确认")
				if (this.upImg.length === 0) {
					return this.$showToast('相关资料：请上传图片');
				}
				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: val,
					type: this.type,
					process: this.value,
					data: {
						data_url: [...this.upImg],
						data_name: [...this.data_image]
					}
				}
				if(this.flag){
					this.flag = false
					this.Report(o)
				}

			},
			async Report(o) {

				console.log(o, 'o')
				const res = await Prevention.postProjectReport(o)
				if (res.success) {
					uni.$emit('upLoad')
				}
				this.flag = true
				console.log(res)
				this.$showToast(res.msg);
			},

			cancel(val) {
				// 撤销
				this.titleText = '将撤回所有已上报内容，确定撤回？'
				this.val = val
				this.showDialog = true;

			},
			async cancell() {
				const o = {
					id: this.farId,
					first_index: this.inx,
					second_index: this.val,
					type: this.type,
				}
				const res = await Prevention.postReportCancell(o)
				if (res.success) {
					uni.$emit('upLoad')
					
				} 
				this.flag = true
				console.log(res)
				this.$showToast(res.msg);
			}

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-easyinput__content{
		height: 72rpx !important;
		margin-top: 20rpx;
	}
	.xbd-project-card {
		display: flex;

		.left {
			font-size: 28rpx;
			color: #000623;
			width: 120rpx;
			margin-right: 30rpx;
		}

		.middle {
			display: flex;
			flex-direction: column;

			.garden {
				height: 24rpx;
				width: 24rpx;
			}

			.line {
				flex: 1;
				margin-left: 11rpx;
				border-left: 2rpx dashed #e5e5e5;
			}
		}

		.right {
			margin-left: 30rpx;
			margin-bottom: 80rpx;
			flex: 1;

			.tag {
				font-size: 26rpx;
				color: #8890A5;
				margin-bottom: 16rpx;
			}

			.text {
				white-space: pre-line !important;
				word-break: break-all !important;
				word-wrap: break-word ;
				font-size: 30rpx;
				color: #000623;
				font-weight: 400;
				margin-bottom: 20rpx;
			}

			.opinion {
				font-size: 30rpx;
				color: #000623;
				font-weight: 400;
			}
			.time{
				font-size: 28rpx;
			}
			.name {
				display: flex;
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 10rpx;

				.state {
					padding: 3rpx 6rpx;
					font-size: 22rpx;
					color: #FFFFFF;
					margin-left: 20rpx;
					background-color: #48BC7C;
					border-radius: 4rpx;
				}

				.color {
					background-color: #FC4F4F !important;
				}
			}

			.attachment {
				display: flex;
				flex-wrap: wrap;

				.image {
					width: 124rpx;
					height: 124rpx;
					margin-right: 20rpx;
					margin: 10rpx 20rpx 10rpx 0;

					&:nth-child(3n) {
						margin-right: 0 !important;
					}
				}
			}


			.image {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				.box-image {
					position: relative;
					&:nth-child(3n) {
						margin-right: 0 !important;
					}
				}

				.del {
					width: 38rpx;
					height: 38rpx;
					position: absolute;
					top: -16rpx;
					right: 4rpx;
				}

				.images {
					margin-right: 20rpx;
					width: 120rpx;
					height: 120rpx;

					&:nth-child(3n) {
						margin-right: 0 !important;
					}
				}

				.upload {

					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;
					font-size: 20rpx;
					color: #A0A7B8;
					width: 140rpx;
					height: 140rpx;
					border: 2rpx dashed #d0d6e5;
					border-radius: 8rpx;
					line-height: normal;

					image {
						width: 28rpx;
						height: 28rpx;
						margin-right: 0;
						margin-bottom: 10rpx;
					}
				}
			}

			.textarea {
				box-sizing: border-box;
				min-height: 120rpx;
				padding: 20rpx 30rpx;
				font-size: 26rpx;
				border: 2rpx solid #EBEEF5;
				margin-bottom: 20rpx;
				border-radius: 8rpx;
			}

			.floot {
				margin-top: 60rpx;
				display: flex;
				justify-content: flex-end;

				.btn {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 120rpx;
					height: 60rpx;
					font-size: 32rpx;
					border-radius: 8rpx;
				}

				.back {
					border: 2rpx solid #D0D6E5;
					color: #000623;
				}

				.pass {
					background: linear-gradient(266deg, #2e73fc 3%, #1ea9fb 95%);
					// border: 2rpx solid #FC4F4F;
					color: #FFFFFF;
				}


			}
		}
	}
</style>
